/**
 * 邮箱注册页面组件
 * 提供用户通过邮箱注册账号的功能
 * 包含邮箱输入、验证码获取、密码设置和邀请码填写等功能
 */

// src/pages/EmailRegistration.tsx
import React, { useState } from 'react';
import { Input, Button } from 'antd-mobile';
import { useNavigate } from "react-router-dom";
import './Index.scss';
import JSEncrypt from 'jsencrypt';
import { postHttp } from "../../request/api";

/**
 * 注册表单数据接口
 * 定义了注册表单所需的所有字段
 */
interface RegistrationForm {
    email: string;      // 用户邮箱
    code: string;       // 验证码
    pwd1: string;       // 密码
    pwd2: string;       // 确认密码
    inviteCode: string; // 邀请码
}

/**
 * 邮箱注册页面组件
 * 提供用户通过邮箱注册账号的功能
 */
const EmailRegistration: React.FC = () => {
    const navigate = useNavigate();
    // 表单数据状态
    const [formData, setFormData] = useState<RegistrationForm>({
        email: '',
        code: '',
        pwd1: '',
        pwd2: '',
        inviteCode: ''
    });
    // 表单错误信息状态
    const [errors, setErrors] = useState<{ [key: string]: string }>({});

    /**
     * RSA公钥
     * 用于加密用户密码，确保密码在传输过程中的安全性
     */
    const publicKey = `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCuQd3gESx7VdIyRYUWjmjg61VIgUK6F45hClmqUMZ7xNiT5rlLM6e78osMvBF/yP7cVm7pK+NMCDWoVS1/AETpxJYqUlIC77ZAU8/MnP96IupnJL87vqhPcpdv7+VqLM38ls++yuD/F/HSoOQTv/leJh+dgE/4EYAJjOWFAbYfXwIDAQAB`;

    /**
     * 数据加密函数
     * 使用RSA公钥对数据进行加密
     * @param publicKey - RSA公钥
     * @param data - 需要加密的数据
     * @returns 加密后的数据
     */
    const encryptedData = (publicKey: string, data: string) => {
        // 新建JSEncrypt对象
        const encryptor = new JSEncrypt();
        // 设置公钥
        encryptor.setPublicKey(publicKey); // publicKey为公钥
        // 加密数据
        return encryptor.encrypt(data); //data就是需要加密的密码
    };

    /**
     * 表单字段变更处理函数
     * 更新表单数据状态
     * @param key - 表单字段名称
     * @returns 处理函数
     */
    const handleChange = (key: keyof RegistrationForm) => (val: string) => {
        setFormData(prev => ({
            ...prev,
            [key]: val
        }));
    };

    /**
     * 表单验证函数
     * 验证表单数据的有效性
     * @returns 表单是否有效
     */
    const validateForm = () => {
        const newErrors: { [key: string]: string } = {};
        // 验证邮箱
        if (!formData.email) {
            newErrors.email = '请输入邮箱';
        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
            newErrors.email = '请输入有效的邮箱地址';
        }
        // 验证验证码
        if (!formData.code) {
            newErrors.code = '请输入验证码';
        }
        // 验证密码
        if (!formData.pwd1) {
            newErrors.pwd1 = '请输入密码';
        }
        // 验证两次密码是否一致
        if (formData.pwd1 !== formData.pwd2) {
            newErrors.pwd2 = '两次输入的密码不一致';
        }
        setErrors(newErrors);
        return Object.keys(newErrors).length === 0;
    };

    /**
     * 表单提交处理函数
     * 验证表单并提交注册请求
     */
    const handleSubmit = () => {
        if (validateForm()) {
            // 加密密码
            const encryptedPwd = encryptedData(publicKey, formData.pwd1);
            console.log(formData);
            // 确保加密成功
            if (encryptedPwd) {
                formData.pwd1 = encryptedPwd;
                formData.pwd2 = formData.pwd1;
                console.log(postHttp, 'postHttp');

                // 发送注册请求
                postHttp('/health/user/v1/register', formData).then((r) => {
                    // 注册成功后跳转到登录页
                    navigate('/login'); 
                });
            } else {
                setErrors({ pwd1: '密码加密失败，请重试' });
            }
        }
    };

    /**
     * 获取验证码处理函数
     * 验证邮箱并发送验证码请求
     */
    const handleGetCode = () => {
        // 验证邮箱
        if (!formData.email) {
            setErrors({ email: '请输入邮箱' });
            return;
        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
            setErrors({ email: '请输入有效的邮箱地址' });
        }
        // 发送验证码请求
        postHttp('/health/user/v1/sendOutEmailCode', { email: formData.email }).then((res) => {
        })
    };

    return (
        <div className="registration-container">
            <div className="form-box">
                {/* 邮箱输入框 */}
                <Input
                    placeholder="请输入邮箱"
                    value={formData.email}
                    onChange={handleChange('email')}
                />
                {errors.email && <div className="error-text">{errors.email}</div>}

                {/* 验证码输入框和获取按钮 */}
                <div className="input-group">
                    <Input
                        placeholder="请输入验证码"
                        value={formData.code}
                        onChange={handleChange('code')}
                        style={{ flex: 1 }}
                    />
                    <Button size="small" onClick={handleGetCode} style={{ marginLeft: 8 }}>
                        获取验证码
                    </Button>
                </div>
                {errors.code && <div className="error-text">{errors.code}</div>}

                {/* 密码输入框 */}
                <Input
                    placeholder="请输入密码"
                    type="password"
                    value={formData.pwd1}
                    onChange={handleChange('pwd1')}
                />
                {errors.pwd1 && <div className="error-text">{errors.pwd1}</div>}

                {/* 确认密码输入框 */}
                <Input
                    placeholder="请再次输入密码"
                    type="password"
                    value={formData.pwd2}
                    onChange={handleChange('pwd2')}
                />
                {errors.pwd2 && <div className="error-text">{errors.pwd2}</div>}

                {/* 邀请码输入框 */}
                <Input
                    placeholder="请输入邀请码"
                    value={formData.inviteCode}
                    onChange={handleChange('inviteCode')}
                />

                {/* 注册按钮 */}
                <Button block onClick={handleSubmit}>
                    注册
                </Button>
            </div>
        </div>
    );
};

export default EmailRegistration;
